<template>
  <div class="system-menu-container">
		<div class="system-user-search mb15">
			<el-form :model="param" :inline="true" ref="queryFormRef" @keyup.enter.native="loadList" label-width="120px">
				<el-row>
					<el-col :span="8">
						<el-form-item prop="designerCode" label="编码">
							<el-input v-model="param.dataForm.designerCode" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item prop="designerName" label="名称">
							<el-input v-model="param.dataForm.designerName" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-button type="primary" class="ml7" @click="loadList">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item prop="hasTask" label="是否含流程">
							<DicSelect v-model="param.dataForm.hasTask" placeholder="请选择" dicCode="1008" filterable></DicSelect>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item prop="taskDefCode" label="流程编码">
							<el-input v-model="param.dataForm.taskDefCode" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-button type="primary" class="ml10" @click="reSetForm(queryFormRef)">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重置
						</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="home_common background_bg6">
			<div class="btnStyle">
				<el-button  type="success" icon="ele-Plus" @click="addOrUpdateHandle()">新增</el-button>
				<el-button  type="primary" icon="ele-Edit" @click="updateHandle()" :disabled="dataListSelections.length !== 1">修改</el-button>
				<el-button  type="danger" icon="ele-Delete" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">删除</el-button>
			</div>
		</div>
		<el-table :data="dataList" border v-loading="listLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
			<el-table-column prop="id" type="selection" width="50"> </el-table-column>
			<el-table-column prop="designerCode" label="编码"></el-table-column>
			<el-table-column prop="designerName" label="名称"></el-table-column>
			<el-table-column prop="typeCode" label="业务类型" :formatter="formatTypeCode"></el-table-column>
			<el-table-column prop="hasTask" label="是否含流程" :formatter="formatStatus"></el-table-column>
			<el-table-column prop="taskDefCode" label="流程定义编码"></el-table-column>
			<el-table-column prop="newFormId" label="新建时表单" :formatter="formatFormDesigner"></el-table-column>
			<el-table-column prop="modFormId" label="修改时表单" :formatter="formatFormDesigner"></el-table-column>
			<el-table-column prop="detailFormId" label="详情表单" :formatter="formatFormDesigner"></el-table-column>
			<el-table-column prop="customizeApi" label="是否自定义接口" :formatter="formatStatus"></el-table-column>
			<el-table-column header-align="center" align="center" width="150" label="操作">
				<template  #default="scope">
					<el-button type="primary" link @click="updateHandle(scope.row.id)" >修改</el-button>
					<el-button type="primary" link @click="deleteHandle(scope.row.id)" >删除</el-button>
					<el-button type="primary" link @click="detailHandle(scope.row.id)" >详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
			:pager-count="5"
			:page-sizes="[10, 50, 200]"
			v-model:current-page="param.page"
			background
			v-model:page-size="param.limit"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total" small>
		</el-pagination>
		<el-dialog :title="!dataForm.id ? '新增' : '修改'" v-model="dialogVisible" width="70%" class="customDialog" :close-on-click-modal="false">
			<el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmit(dataFormRef)" label-width="120px">
				<el-divider content-position="left">基本信息</el-divider>
				<el-row>
					<el-col :span="8">
						<el-form-item label="编码" prop="designerCode">
							<el-input v-model="dataForm.designerCode" placeholder="编码" :disabled="!!dataForm.id" maxlength="50"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="名称" prop="designerName" >
							<el-input v-model="dataForm.designerName" placeholder="名称" maxlength="100"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="业务类型" prop="typeCode" >
							<el-select v-model="dataForm.typeCode" placeholder="请选择业务类型" style="width:100%" filterable>
								<el-option v-for="(item,index) in businessTypeList" :key="item.typeCode" :label="item.typeName" :value="item.typeCode"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否含流程" prop="hasTask">
							<DicSelect v-model="dataForm.hasTask" placeholder="请选择是否含流程" dicCode="1008" style="width:100%" filterable></DicSelect>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="流程定义编码" prop="taskDefCode" >
							<el-input v-model="dataForm.taskDefCode" placeholder="名称" maxlength="100"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
					</el-col>
				</el-row>
				<el-divider content-position="left">表单信息</el-divider>
				<el-row>
					<el-col :span="8">
						<el-form-item label="新建时表单" prop="newFormId" >
							<el-select v-model="dataForm.newFormId" placeholder="请选择表单" style="width:100%" filterable>
								<el-option v-for="(item,index) in formDesignerList" :key="item.id" :label="item.formName" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="修改时表单" prop="modFormId" >
							<el-select v-model="dataForm.modFormId" placeholder="请选择表单" style="width:100%" filterable>
								<el-option v-for="(item,index) in formDesignerList" :key="item.id" :label="item.formName" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="详情表单" prop="detailFormId" >
							<el-select v-model="dataForm.detailFormId" placeholder="请选择表单" style="width:100%" filterable>
								<el-option v-for="(item,index) in formDesignerList" :key="item.id" :label="item.formName" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left">交互信息</el-divider>
				<el-row>
					<el-col :span="8">
						<el-form-item label="自定义后端接口" prop="customizeApi">
							<DicSelect v-model="dataForm.customizeApi" placeholder="请选择自定义后端接口" dicCode="1008" style="width:100%" filterable></DicSelect>
						</el-form-item>
					</el-col>
					<el-col :span="8">
					</el-col>
					<el-col :span="8">
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="新增接口" prop="addApiUrl">
							<el-input v-model="dataForm.addApiUrl" placeholder="新增接口url，例如：/sys/.../add" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="修改接口" prop="updateApiUrl">
							<el-input v-model="dataForm.updateApiUrl" placeholder="修改接口url，例如：/sys/.../update" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="表单数据加载接口" prop="detailApiUrl">
							<el-input v-model="dataForm.detailApiUrl" placeholder="数据加载接口url，例如：/sys/.../info/{id}" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-descriptions>
					<el-descriptions-item label="说明：">选择自定义接口为“是”时，将使用自定义的接口进行业务提交，接口需为post形式且参数为json格式数据{"formData": {...}, "taskParams":{"taskDefCode":"流程定义编码", "processInstanceId":"流程实例id（如果存在）", "taskId":"流程任务id（如果存在）"...}}，含流程的情况下需要在后端接口中自行调用工作流流转方法；选择自定义接口为“否”时通过通用业务接口进行业务处理，以json形式存储业务数据</el-descriptions-item>
				</el-descriptions>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose(dataFormRef)">取消</el-button>
					<el-button type="primary" @click="dataFormSubmit(dataFormRef)">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="详情" v-model="dialogVisibleDetail" width="70%" class="customDialog">
			<el-form :model="dataForm" :rules="dataRule" ref="dataFormRefDetail"  label-width="120px">
				<el-divider content-position="left">基本信息</el-divider>
				<el-row>
					<el-col :span="8">
						<el-form-item label="编码" prop="designerCode">
							<el-input v-model="dataForm.designerCode" placeholder="编码" :disabled="true" maxlength="50"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="名称" prop="designerName" >
							<el-input v-model="dataForm.designerName" placeholder="名称" disabled maxlength="100"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="业务类型" prop="typeCode" >
							<el-select v-model="dataForm.typeCode" placeholder="请选择业务类型" style="width:100%" disabled  >
								<el-option v-for="(item,index) in businessTypeList" :key="item.typeCode" :label="item.typeName" :value="item.typeCode"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="是否含流程" prop="hasTask">
							<DicSelect v-model="dataForm.hasTask" placeholder="请选择是否含流程" dicCode="1008" style="width:100%" :isDisabled="true" ></DicSelect>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="流程定义编码" prop="taskDefCode" >
							<el-input v-model="dataForm.taskDefCode" placeholder="名称" maxlength="100" disabled ></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
					</el-col>
				</el-row>
				<el-divider content-position="left">表单信息</el-divider>
				<el-row>
					<el-col :span="8">
						<el-form-item label="新建时表单" prop="newFormId" >
							<el-select v-model="dataForm.newFormId" placeholder="请选择表单" style="width:100%" disabled >
								<el-option v-for="(item,index) in formDesignerList" :key="item.id" :label="item.formName" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="修改时表单" prop="modFormId" >
							<el-select v-model="dataForm.modFormId" placeholder="请选择表单" style="width:100%" disabled >
								<el-option v-for="(item,index) in formDesignerList" :key="item.id" :label="item.formName" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="详情表单" prop="detailFormId" >
							<el-select v-model="dataForm.detailFormId" placeholder="请选择表单" style="width:100%" disabled >
								<el-option v-for="(item,index) in formDesignerList" :key="item.id" :label="item.formName" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left">交互信息</el-divider>
				<el-row>
					<el-col :span="8">
						<el-form-item label="自定义后端接口" prop="customizeApi">
							<DicSelect v-model="dataForm.customizeApi" placeholder="请选择自定义后端接口" dicCode="1008" style="width:100%" :isDisabled="true" ></DicSelect>
						</el-form-item>
					</el-col>
					<el-col :span="8">
					</el-col>
					<el-col :span="8">
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="新增接口" prop="addApiUrl">
							<el-input v-model="dataForm.addApiUrl" placeholder="新增接口url，例如：/sys/.../add" maxlength="200" disabled ></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="修改接口" prop="updateApiUrl">
							<el-input v-model="dataForm.updateApiUrl" placeholder="修改接口url，例如：/sys/.../update" maxlength="200" disabled ></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="表单数据加载接口" prop="detailApiUrl">
							<el-input v-model="dataForm.detailApiUrl" placeholder="数据加载接口url，例如：/sys/.../info/{id}" maxlength="200" disabled ></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleCloseDetail(dataFormRefDetail)">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, watch, onMounted, defineComponent } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import {systemApi} from '/@/api/systemapi'
import { getCodeList } from '/@/utils/cacheDict'
import { useRouter } from 'vue-router';
export default defineComponent({
	setup () {
		const dataFormRef = ref<FormInstance>()
		const queryFormRef = ref<FormInstance>()
		const dataFormRefDetail = ref<FormInstance>()
		const router = useRouter();
		const state = reactive({
			isShow: false,
			listLoading: false,
			dataList: [],
			total: 0,
			totalSelect: 0,
			dataDictionaryList: {},
			param: {
				page: 1,
				limit: 10,
				dataForm: {
					designerCode: '',
					designerName: '',
					hasTask: '',
					taskDefCode: ''
				}
			},
			dataListSelections: [],
			dialogVisible: false,
			dialogVisibleDetail: false,
			dataForm: {
				id: '',
				version: 0,
				designerCode: '',
				designerName: '',
				typeCode: '',
				hasTask: '',
				taskDefCode: '',
				newFormId: '',
				modFormId: '',
				detailFormId: '',
				menuTxt: '',
				customizeApi: '',
				addApiUrl: '',
				updateApiUrl: '',
				detailApiUrl: ''
			},
			dataRule: {
				designerCode: [
					{ required: true, message: '编码不能为空', trigger: 'blur' }
				],
				designerName: [
					{ required: true, message: '名称不能为空', trigger: 'blur' }
				],
				typeCode: [
					{ required: true, message: '业务类型不能为空', trigger: 'blur' }
				],
				hasTask: [
					{ required: true, message: '请选择是否含流程', trigger: 'blur' }
				],
				taskDefCode: [
					{ required: false, message: '流程定义编码不能为空', trigger: 'blur' }
				],
				newFormId: [
					{ required: true, message: '新增表单不能为空', trigger: 'blur' }
				],
				modFormId: [
					{ required: true, message: '修改表单不能为空', trigger: 'blur' }
				],
				detailFormId: [
					{ required: true, message: '详情表单不能为空', trigger: 'blur' }
				],
				customizeApi: [{ required: true, message: '请选择自定义后端接口', trigger: 'blur' }],
				addApiUrl: [{ required: false, message: '新增接口为空', trigger: 'blur' }],
				updateApiUrl: [{ required: false, message: '修改接口不能为空', trigger: 'blur' }],
				detailApiUrl: [{ required: false, message: '表单数据加载接口不能为空', trigger: 'blur' }],
			},
			businessTypeList: [],
			businessTypeMap: {},
			formDesignerList: [],
			formDesignerMap: {}
		})

		watch(() => state.dataForm.hasTask, (val:string) => {
			if(val === '1') {
				state.dataRule.taskDefCode[0].required = true;
				state.dataRule.taskDefCode[0].message = '流程定义编码不能为空';
			} else {
				state.dataRule.taskDefCode[0].required = false;
			}
		})
		watch(() => state.dataForm.customizeApi, (val:string) => {
			if(val === '1') {
				state.dataRule.addApiUrl[0].required = true;
				state.dataRule.updateApiUrl[0].required = true;
				state.dataRule.detailApiUrl[0].required = true;
			} else {
				state.dataRule.addApiUrl[0].required = false;
				state.dataRule.updateApiUrl[0].required = false;
				state.dataRule.detailApiUrl[0].required = false;
			}
		})
		// 页面加载时
		onMounted(() => {
			// 数据字典
			getCodeList(state, ['1008'])
			getBusinessType();
			getFormDesigner();
			// 列表查询
			loadList()
		})

		const getBusinessType = () => {
			systemApi().getBusinessTypeList().then(data => {
				if (data && data.code === 0) {
					state.businessTypeList = data.list
					data.list.forEach(item => {
						state.businessTypeMap[item.typeCode] = item.typeName
					})
				} else {
					state.businessTypeList = []
					state.businessTypeMap = {}
				}
			}).catch(() => {
			}).finally(() => {
			})
		}
		const getFormDesigner = () => {
			systemApi().getFormDesignerList().then(data => {
				if (data && data.code === 0) {
					state.formDesignerList = data.list
					data.list.forEach(item => {
						state.formDesignerMap[item.id] = item.formName
					})
				} else {
					state.formDesignerList = []
					state.formDesignerMap = {}
				}
			}).catch(() => {
			}).finally(() => {
			})
		}
		//查询
		const loadList = () => {
			state.listLoading = true
			systemApi().queryBusinessDesignerList(state.param).then(data => {
				if (data && data.code === 0) {
					state.dataList = data.page.list
					state.total = data.page.totalCount
				} else {
					state.dataList = []
					state.total = 0
				}
			}).catch(() => {
			}).finally(() => {
				state.listLoading = false
			})
		}
		//重置
		const reSetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return
			formEl.resetFields()
			state.param.page = 1
			loadList()
			router.push({
				name: 'sys-business-dynamicAppBusinessAdd',
				params: {
					t: 'app',
					id: 'OA0001',
					tagsViewName: '请假申请',
				},
			})
		}

		const selectionChangeHandle = (val: any) => {
			state.dataListSelections = val
		}

		// 分页改变
		const onHandleSizeChange = (val: number) => {
			state.param.limit = val;
			loadList()
		}
		// 分页改变
		const onHandleCurrentChange = (val: number) => {
			state.param.page = val;
			loadList()
		}

		//新增
		const addOrUpdateHandle = () => {
			state.dialogVisible = true
			state.dataForm = {
				id: '',
				version: 0,
				designerCode: '',
				designerName: '',
				typeCode: '',
				hasTask: '',
				taskDefCode: '',
				newFormId: '',
				modFormId: '',
				detailFormId: '',
				menuTxt: '',
				customizeApi: '',
				addApiUrl: '',
				updateApiUrl: '',
				detailApiUrl: ''
			}
		}

		// 修改
		const updateHandle = (id:string | undefined) => {
			state.dialogVisible = true
			if(!id){
				state.dataForm.id = state.dataListSelections[0].id
			}else{
				state.dataForm.id = id
			}
			systemApi().getBusinessDesignerById(state.dataForm.id).then((data) => {
				if (data && data.code === 0) {
					state.dataForm.version = data.data.version
					state.dataForm.designerCode = data.data.designerCode
					state.dataForm.designerName = data.data.designerName
					state.dataForm.typeCode = data.data.typeCode
					state.dataForm.hasTask = data.data.hasTask
					state.dataForm.taskDefCode = data.data.taskDefCode
					state.dataForm.newFormId = data.data.newFormId
					state.dataForm.modFormId = data.data.modFormId
					state.dataForm.detailFormId = data.data.detailFormId
					state.dataForm.menuTxt = data.data.menuTxt
					state.dataForm.customizeApi = data.data.customizeApi
					state.dataForm.addApiUrl = data.data.addApiUrl
					state.dataForm.updateApiUrl = data.data.updateApiUrl
					state.dataForm.detailApiUrl = data.data.detailApiUrl
				}
            })
			
		}
		//详情
		const detailHandle  = (id:string | undefined) => {
			state.dialogVisibleDetail = true
			if(!id){
				state.dataForm.id = state.dataListSelections[0].id
			}else{
				state.dataForm.id = id
			}
			systemApi().getBusinessDesignerById(state.dataForm.id).then((data) => {
				if (data && data.code === 0) {
					state.dataForm.version = data.data.version
					state.dataForm.designerCode = data.data.designerCode
					state.dataForm.designerName = data.data.designerName
					state.dataForm.typeCode = data.data.typeCode
					state.dataForm.hasTask = data.data.hasTask
					state.dataForm.taskDefCode = data.data.taskDefCode
					state.dataForm.newFormId = data.data.newFormId
					state.dataForm.modFormId = data.data.modFormId
					state.dataForm.detailFormId = data.data.detailFormId
					state.dataForm.menuTxt = data.data.menuTxt
					state.dataForm.customizeApi = data.data.customizeApi
					state.dataForm.addApiUrl = data.data.addApiUrl
					state.dataForm.updateApiUrl = data.data.updateApiUrl
					state.dataForm.detailApiUrl = data.data.detailApiUrl
				}
            })
		}
		// 删除
		const deleteHandle = (id: string | undefined) => {
			ElMessageBox.confirm('是否确定删除', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(() => {
				var ids = id ? [id] : state.dataListSelections.map(item => {
					return item.id
				})
				const loading = ElLoading.service({
					lock: true,
					text: '处理中',
					background: 'rgba(0, 0, 0, 0.7)',
				})
				systemApi().deleteBusinessDesigner(ids).then((data) => {
					if (data && data.code === 0) {
						ElMessage.success('删除成功！')
						loadList()
					} else {
						ElMessage.error(data.msg)
					}
				}).catch(() => {
					ElMessage.error('删除失败！')
				}).finally(() => {
					loading.close()
				})
			})
		}

		const dataFormSubmit = (formEl: FormInstance | undefined) => {
			if (!formEl) return
			formEl.validate((valid: boolean) => {
				if (valid) {
					const loading = ElLoading.service({
						lock: true,
						text: '处理中',
						background: 'rgba(0, 0, 0, 0.7)',
					})
					if (!state.dataForm.id) {
						//新增
						systemApi().saveBusinessDesigner(state.dataForm).then(data => {
							if (data && data.code === 0) {
								ElMessage.success('保存成功')
								loadList()
								state.dialogVisible = false
							}else{
								ElMessage.error(data.msg)
							}
						}).catch(() => {
							ElMessage.error('保存失败')
						}).finally(() => {
							loading.close()
						})
					}else{
						//修改
						systemApi().updateBusinessDesigner(state.dataForm).then(data => {
							if (data && data.code === 0) {
								ElMessage.success('保存成功')
								loadList()
								state.dialogVisible = false
							}else{
								ElMessage.error(data.msg)
							}
						}).catch(() => {
							ElMessage.error('保存失败')
						}).finally(() => {
							loading.close()
						})
					}
				}
			})
		}

		//取消修改
		const handleClose = (formEl: FormInstance | undefined) => {
			state.dialogVisible = false
			if (formEl){
				formEl.resetFields()
			}
			loadList()
		}
		const handleCloseDetail = (formEl: FormInstance | undefined) => {
			state.dialogVisibleDetail = false
			loadList()
		}
		const formatStatus = (row:any, column:any, cellValue:any, index:number) => {
			if (cellValue) {
				// return cellValue
				return state.dataDictionaryList['1008'][cellValue]
			}
		}
		const formatTypeCode = (row, column, cellValue, index) => {
			return state.businessTypeMap[cellValue]
		}
		const formatFormDesigner = (row, column, cellValue, index) => {
			return state.formDesignerMap[cellValue]
		}
		return {
			loadList,
			reSetForm,
			onHandleSizeChange,
			onHandleCurrentChange,
			addOrUpdateHandle,
			updateHandle,
			dataFormRef,
			queryFormRef,
			deleteHandle,
			dataFormSubmit,
			handleClose,
			selectionChangeHandle,
			formatStatus,
			getBusinessType,
			getFormDesigner,
			formatTypeCode,
			formatFormDesigner,
			detailHandle,
			dataFormRefDetail,
			handleCloseDetail,
			...toRefs(state),
		}
	}
})
</script>

<style>

</style>